<template>
	<view :style="{height:windowHeight+'px'}">
		
			<uni-nav-bar  :fixed="true" shadow  status-bar   title="通讯录" ></uni-nav-bar>
				<view class="content">
					<uni-search-bar placeholder="请输入姓名" bgColor="#F3F3F3" :fixed="true"  @confirm="search" />
					<uni-card  :isFull="true" @click="detail('bottom')">
						<uni-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list>
					</uni-card>
				</view>	
	</view>
</template>

<script>
	export default {

		data() {
			return {
				windowHeight: 700,
				'list': [{
						'letter': 'A',
						'data': [
							'阿克',
						]
					}, {
						'letter': 'B',
						'data': [
							'保山1',
							'保山1',
							'保山1',
							'保山1',
							'保山1',
							'保山1',
							'保山1',
						]
					}, {
						'letter': 'C',
						'data': [
							'长治1',
							'长治2',
							'长治3',
							'长治4',
							'长治5',
							'长治6',
							
						]
					}]
			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync();
			this.windowHeight = sysInfo.windowHeight-50;
			 
		},
		computed: {
			// 使用计算属性将 menuList 数据分割成每个 swiper-item 中的子数组
		
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		
		
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			bindClick(e) {
				console.log('点击item，返回数据' + JSON.stringify(e))
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 85vh;
		.uni-card{
			margin: 0.8rem 0 !important;
			height: 100%;
		}
		.imageSize{
			width: 1.5rem;
			height: 1.5rem;
		}
		
		.ml5{
			margin-left: 1rem;
		}
	
		padding: 20rpx 0;
	}
</style>
